<template>
  <view class="content">
    <!-- 添加固定标题栏 -->
    <view class="fixed-tabs">
      <view class="tab-item" v-for="(tab, index) in tabs" :key="index" @click="handleTabClick(index,tab.url)">
        <uni-icons :type="tab.icon" size="20" color="#333"></uni-icons>
        <text :class="{ active: currentTab === index }">{{ tab.title }}</text>
      </view>
    </view>
    
    <uni-indexed-list 
      :options="list" 
      :show-select="true"
      @click="onClick"
      class="indexed-list"
      ref="indexedList"
    ></uni-indexed-list>
    
    <!-- 修改底部悬浮按钮组的结构 -->
    <view class="float-buttons">
      <checkbox-group @change="handleCheckAll" class="checkbox-group">
        <label class="checkbox-label">
          <checkbox :checked="isAllChecked" />
          <text>全选</text>
        </label>
      </checkbox-group>
      <view class="button-group">
        <button type="primary" size="mini" @click="handleCancel" style="background-color: #00B26A; border-color: #00B26A;">
          <uni-icons type="undo" size="14" color="#FFFFFF"></uni-icons>
          <text>批量停止</text>
        </button>
        <button type="primary" size="mini" @click="handleConfirm" style="background-color: #00B26A; border-color: #00B26A;">
          <uni-icons type="list" size="14" color="#FFFFFF"></uni-icons>
          <text>批量开始</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { handleList } from '@/api/list'
import type {ListResponse} from '@/api/list'

interface ListItem {
  letter: string
  data: Array<String>
}


// 定义列表数据
const list = ref<ListItem[]>([
  {
    letter: 'A',
    data: ['阿门']
  },
  {
    letter: 'D',
    data: [ '大麦鲸选']
  },
  {
    letter: 'T',
    data: ['特省惠', '亚特任务']
  }
])


// 修改全选状态和选中项目的响应式引用
const indexedList = ref<any>(null)
const isAllChecked = ref(false)
const selectedItems = ref<string[]>([])

// 获取系统信息，添加 tabBar 高度
const systemInfo = uni.getSystemInfoSync()
const safeAreaBottom = systemInfo.safeAreaInsets?.bottom || 0
const tabBarHeight = 50  // tabBar 的默认高度，单位为 px

// 设置 CSS 变量
onMounted(() => {
  document.documentElement.style.setProperty('--safe-area-bottom', `${safeAreaBottom}px`)
  document.documentElement.style.setProperty('--tab-bar-height', `${tabBarHeight}px`)
})

// 修改处理全选事件的函数
const handleCheckAll = (e: { detail: { value: string[] } }) => {
  const checked = e.detail.value.length > 0
  isAllChecked.value = checked
  
  // 获取所有可选项的账号
  const allAccounts = list.value.flatMap(group => group.data)
  

}

// 修改点击事件处理，从原始数据中获取完整信息
const onClick = (item: { name: string, value: string }) => {
  const account = item.value
  const originalItem = list.value
    .flatMap(group => group.data)
    .find(data => data.account === account)
  console.log('点击项目：', originalItem)
}

// 添加接口请求状态
const loading = ref(false)

// 修改确认按钮处理函数
const handleConfirm = async () => {
  if (selectedItems.value.length === 0) {
    uni.showToast({
      title: '请先选择项目',
      icon: 'none'
    })
  }
  loading.value = true
  try {
    const res: ListResponse = await handleList({
      page: 1,
      pageSize: 10
    })
    // 直接使用 res 的屬性
    console.log(res.list)
    console.log(res.total)
  } catch (error) {
    uni.showToast({
      title: error.message || '网络错误',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

// 取消按钮处理函数
const handleCancel = () => {
  selectedItems.value = []
  isAllChecked.value = false
  uni.showToast({
    title: '已取消选择',
    icon: 'none'
  })
}

// 添加标签页数据
const tabs = ref([
  { title: '今日接单', icon: 'pulldown', url: '/pageList/order' },
  { title: '平台余额', icon: 'circle-filled', url: '/pageList/balance' },
  { title: '问题反馈', icon: 'chatbubble-filled', url: '/pageList/feedback' },
  { title: '防掉后台', icon: 'flag-filled' , url: '/pageList/background'},
  { title: '记账簿', icon: 'list', url: '/pageList/account'}
])

const currentTab = ref(0)

const handleTabClick = (index: number, url: string) => {
  currentTab.value = index
  uni.showToast({
    title: `切换到${tabs.value[index].title}`,
    icon: 'none'
  })
  uni.navigateTo({
    url
  })
}
</script>

<style lang="scss">
:root {
  --safe-area-bottom: 0px;
  --tab-bar-height: 50px;
  --fixed-tabs-height: 120rpx; /* 添加固定标题栏高度变量 */
}

.fixed-tabs {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 20rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  height: var(--fixed-tabs-height); /* 使用变量设置高度 */
  box-sizing: border-box;
  
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    
    text {
      font-size: 24rpx;
      color: #666;
      
      &.active {
        color: #00B26A;
      }
    }
  }
}

.float-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  padding-bottom: calc(20rpx + var(--safe-area-bottom) + var(--tab-bar-height));
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 99;
  
  display: flex;  /* 改為 flex 布局 */
  align-items: center;  /* 垂直居中对齐 */
  justify-content: space-between;  /* 两端对齐 */
  
  .checkbox-group {
    flex-shrink: 0;  /* 防止被压缩 */
  }
  
  .checkbox-label {
    display: flex;
    align-items: center;
    
    text {
      margin-left: 10rpx;
    }
  }
  
  .button-group {
    display: flex;
    gap: 20rpx;
    
    button {
      margin: 0;  /* 重置按钮默认外边距 */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4rpx;
    }
  }
  
  height: 88rpx;
}

.indexed-list {
  margin-top: 20rpx;
  
  padding-top: 120rpx; /* 添加上边距，与固定标题栏高度相同 */
  padding-bottom: calc(20rpx + var(--safe-area-bottom) + var(--tab-bar-height));
}
</style>
